<style scoped lang="less">
@media screen and (min-width: 829px) {
  .contact {
    width: 100%;
    overflow: hidden;
    background-color: #F6F7FB;
    .content{
      min-height: 40rem;
    }
    .title {
      margin: 5.57rem auto 0;
      height: 2.36rem;
      font-size: 2.36rem;
      font-weight:bold;
      color: rgba(51, 51, 51, 1);
      line-height: 1.79rem;
      text-align: center;
    }
    .icon{
      color: rgba(102,102,102,1);
    }
    .icon-post{
      font-size: 1.1rem;
    }
    .title_i{
      display: none;
    }
    .middle {
      margin-top: 4.36rem;
      height: 2rem;
      width: 100%;
      .phoneWrap {
        text-align: right;
        height: 1.14rem;
        
        color: rgba(51, 51, 51, 1);
      }
      .addressWrap {
        text-align: center;
        height: 1.14rem;
        
        color: rgba(51, 51, 51, 1);
      }
      .postWrap {
        text-align: left;
        height: 1.14rem;
        
        color: rgba(51, 51, 51, 1);
      }
    }
    .textarea {
      display: block;
      /*width: 80%;*/
      width: 68.63rem;
      height: 21.53rem;
      margin: 3.5rem auto 0;
      position: relative;
      font-size: 1.14rem;
      background-color: white;
      border-radius: 0.21rem;
      overflow: hidden;
      textarea {
        display: block;
        width: 98%;
        /*height: 100%;*/
        display:-webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 10.5rem;
        font-size: 1.14rem;
        /*padding: 1.4rem 1.4rem 0;*/
        padding: 1.4rem 0 0 1.4rem;
        background-color: #fff;
        textarea::-webkit-input-placeholder {
          font-size: 1.14rem;
          
          color: rgba(204, 204, 204, 1);
        }
        textarea:-moz-placeholder {
          font-size: 1.14rem;
          
          color: rgba(204, 204, 204, 1)
        }
        textarea::-moz-placeholder {
          font-size: 1.14rem;
          
          color: rgba(204, 204, 204, 1)
        }
        textarea:-ms-input-placeholder {
          font-size: 1.14rem;
          
          color: rgba(204, 204, 204, 1)
        }
      }
      .line {
        width: 96%;
        position: absolute;
        height: 0.07rem;
        background-color: #EBEBEB;
        bottom: 7.14rem;
        left: 2%;
      }
      .wordnum{
      position: absolute;
      bottom: 8rem;
      right: 1.4rem;
      font-size:1rem;
      
      color:rgba(231,230,230,1);
      }
    }
    .submit {
      cursor: pointer;
      display: inline-block;
      width: 18.57rem;
      height: 3.29rem;
      background-color: #F37D0A;
      color: white;
      font-size: 1.43rem;
      line-height: 3.29rem;
      text-align: center;
      border-radius: 0.21rem;
      position: absolute;
      left: 26.43rem;
      bottom: 1.33rem;
    }
    .s_mobile{
      display: none;
    }
    .submit:hover {
      transform: scale(1.05);
    }
    .sub-box {
      text-align: center;
      background-color: #fff;
      width: 100%;
      padding: 2rem 1.5rem;
    }
    .info-title {
      display: none
    }
  }
}

@media screen and (max-width: 829px) {
  .contact {
    background-color: #fff;
    * {
      box-sizing: border-box;
    }
    .content{
       padding: 0 0.55rem;
    }
    .phoneWrap{
      margin-bottom: 0.25rem;
    }
    .title{
      display: none;
    }
    .title_i {
      font-size: 0.36rem;
      /*font-weight: bold;*/
      margin: 0.56rem 0 0.61rem;
      text-align: center;
      font-family:PingFang-SC-Bold;
      color:rgba(26,26,26,1);
    }
    .middle {
      font-size: 0.26rem;
      color: #3E3A39;
      .c-list {
        margin-bottom: 0.25rem;
      }
      .icon {
        display: none
      }
    }
    .textarea{
      position: relative;
      clear: both;
      height: 4.6rem;
      textarea{border:solid 1px #ccc;height: 4.4rem;width: 100%;font-size: 0.28rem;padding: 0.3rem;margin-top: 0.3rem;}
      .bw-btn{width: 100%;font-size: 0.32rem;height: 0.92rem;line-height: 0.92rem;margin-top: 0.5rem;}
      .wordnum{
        position: absolute;
        bottom: 0.2rem;
        right: 0.3rem;
        font-size:0.2rem;
        
        color:rgba(231,230,230,1);
      }
    }
    .submit{
      /*position: absolute;*/
      width: 100%;
      height: 0.92rem;
      margin-top: 0.5rem;
      font-size:0.32rem;
      font-family:PingFang-SC-Medium;
      color:rgba(255,255,255,1);
      line-height:0.92rem;
      background-color: #FD9D40;
    }
    .s_pc{
      display: none;
    }
  }
}

</style>
<template>
  <div class="contact" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="content">
      <h1 class="title">联系我们  CONTACT    US</h1>
      <h1 class="title_i">联系我们</h1>
      <div class="middle">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" class=" phoneWrap">
          <span class="icon icon-phone"></span>
          <span class="info-title">电话:</span>
          <span class="phoneNum">028-87339759</span>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" class="c-list addressWrap">
          <span class="icon icon-address"></span>
          <span class="info-title">地址:</span>
          <span class="address">四川省成都市青羊区小南街28号16楼</span>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" class="c-list postWrap">
          <span class="icon icon-post"></span>
          <span class="info-title">邮编:</span>
          <span class="postNum">610015</span>
        </el-col>
      </div>
      <section class="textarea">
        <textarea v-model="textareaData" placeholder="给我们留言：">
        </textarea>
        <div class="line"></div>
        <div class="wordnum">不超过500字数</div>
        <div class="submit bw-btn bw-btn-warning s_pc" @click="submit">提交</div>
      </section>
      <div class="submit bw-btn bw-btn-warning s_mobile" @click="submit">提交</div>
    </div>
  </div>
</template>
<script>
  import './../common/toast.css'
  import toast from './../common/toast.js'
export default {
  data() {
    return {
      textareaData: '',
      fullscreenLoading:false,
      wordNum:0,
    }
  },
  components: {

  },
  methods: {
    submit() {
      this.fullscreenLoading=true;
      if(this.textareaData.length==0){
        this.fullscreenLoading=false;
        this.$message({
          message: '提交内容为空',
          type: 'warning'
        });
        return
      }
      if(this.textareaData.length>500){
        this.fullscreenLoading=false;
        this.wordNum = this.textareaData.length;
        this.$message({
          message: '提交内容字数不超过五百字',
          type: 'warning'
        });
        return
      }
        this.$service('/api/MessageBoard/AddMeassage','post',JSON.stringify({
          content:this.textareaData,
          platformType:0
        })).then((response) => {
          this.textareaData=''
          this.fullscreenLoading=false;
          this.$message({
            message: '提交成功',
            type: 'success'
          });
//          toast.showConfirm('内容不能为空')
        })
          .catch(err=>{
            this.fullscreenLoading=false;
          })
    }
  },
  props:['rootInfo'],
  mounted() {
//    if(document.body.offsetWidth || window.screen.width <829){
//      this.rootInfo.showFooter=false;
//    }else {
//      this.rootInfo.showFooter=true;
//    }
//    this.wordNum = this.textareaData.length;
  },
}

</script>
